<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="referrer" content="no-referrer" />
	<title>切换轮播图</title>
	<style type="text/css">
		body {
            background-color: rgba(206, 182, 182, 0.637);
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }
		*{
			padding: 0;
			margin: 0;
		}
		.container {
			position: relative;
			width: 650px;
			display: flex;
			justify-content: space-evenly;
			
		}
		.img_wrap {
			width: 400px;
			height: 500px;
			transition: .4s;
		    background-size: cover;
		}
		.change_wrap {
			    width: 200px;
			    height: 500px;
			    display: flex;
			    /* 纵向布局 */
			    flex-direction: column;
			    justify-content: space-between;
		}
		.d{
		    position: relative;
		    width: 200px;
		    height: 90px;
		    right: 0;
		    transition:.5s;
		    overflow: hidden;
		}
		.d img{
		    position: absolute;
		    width: 200px;
		    /* 小图片上移 */
		    transform: translate(0,-50px);
		    transition: .5s;
		    right: 0;
		}
		.d.dd{
		    opacity: 0;
		    right: 250px;
		}
		.d:hover img{
		    opacity: 0;
		    right: 250px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="img_wrap">
			
		</div>
		<div class="change_wrap">
		    <div class="d"><img class="e" src="https://pic.cnemm.net/2903/46.jpg" alt=""></div>
		    <div class="d"><img class="e" src="https://pic.cnemm.net/2903/42.jpg" alt=""></div>
		    <div class="d"><img class="e" src="https://pic.cnemm.net/2903/40.jpg" alt=""></div>
		    <div class="d"><img class="e" src="https://pic.cnemm.net/2903/37.jpg" alt=""></div>
		    <div class="d"><img class="e" src="https://pic.cnemm.net/2903/34.jpg" alt=""></div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var time = null;
	var index = 0;
	var iwrap = document.querySelector('.img_wrap')
	var change_list = document.querySelector('.change_wrap')
	let list = document.getElementsByClassName("e")
	iwrap.style.backgroundImage = `url(${list[0].src})`
	var pre_src = ''
		change_list.addEventListener('mouseover',function(e) {
			if(index-1>=0) {
				change_list.children[index-1].className = 'd'
			}
			var src = e.target.children[0].src
			if(src) {
				iwrap.style.backgroundImage = `url(${src})`
				clearInterval(time)
				index = index +1
				ts()
			}
		})
	function ts(){
	    time = setInterval(function(){
			if(index == 6) {
				index = 0
			}
			if(index-1>=0) {
				change_list.children[index-1].className = 'd'
			}
			if(index == 5) {
				index = 0
			}	
			iwrap.style.backgroundImage = `url(${list[index].src})`
			change_list.children[index].className = 'd dd'
			index++	
	    },1500);
	}
	ts()
</script>
</html>